import { Button, Table } from 'antd';
import Column from 'antd/es/table/Column';
import { useMemo, useState } from 'react';
import { useRestoreContext } from '../contexts/RestoreContext';
import Offline from './dialogs/Offline';
import Online from './dialogs/Online';

const PageList = () => {
  const { setSelectKey } = useRestoreContext();
  const [OnVisible, setOnVisible] = useState(false);
  const [selectOn, setSelectOn] = useState({});
  const [selectOff, setSelectOff] = useState({});
  const [OffVisible, setOffVisible] = useState(false);

  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };
  const rowSelection = {
    onChange: onSelectChange
  };
  const onlineDetails = (data: any) => {
    setOnVisible(true);
    setSelectOn(data);
    console.log('online');
  };
  const offlineDetails = (data: any) => {
    setOffVisible(true);
    setSelectOff(data);
    console.log('offline');
  };
  const closeEditDialog = () => {
    setOnVisible(false);
    setOffVisible(false);
  };
  return (
    <>
      <Table
        dataSource={[
          { id: 1, recoveryType: 1 },
          { id: 2, recoveryType: 0 }
        ]}
        rowKey="id"
        bordered
        rowSelection={rowSelection}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="档案类型" dataIndex="archivesType" key="archivesType" align="center" />
        <Column title="恢复范围" dataIndex="recoveryScope" key="recoveryScope" align="center" />
        <Column
          title="恢复类型"
          dataIndex="recoveryType"
          key="recoveryType"
          align="center"
          render={(text: any, record: any) => (record.recoveryType === 0 ? '在线恢复' : '离线恢复')}
        />
        <Column title="恢复备份节点" dataIndex="backupNode" key="backupNode" align="center" />
        <Column title="恢复方式" dataIndex="recoveryMethod" key="recoveryMethod" align="center" />
        <Column title="恢复开始时间" dataIndex="startTime" key="startTime" align="center" />
        <Column title="恢复完成时间" dataIndex="finishTime" key="finishTime" align="center" />
        <Column title="处理人" dataIndex="Handler" key="Handler" align="center" />
        <Column title="状态" dataIndex="state" key="state" align="center" />
        <Column
          title="操作"
          dataIndex="active"
          key="active"
          align="center"
          render={(_: any, record: any) =>
            record.recoveryType === 0 ? (
              <Button
                type="link"
                size="small"
                onClick={() => {
                  onlineDetails(record);
                }}
              >
                详情
              </Button>
            ) : (
              <Button
                type="link"
                size="small"
                onClick={() => {
                  offlineDetails(record);
                }}
              >
                详情
              </Button>
            )
          }
        />
      </Table>
      {useMemo(
        () => (
          <Offline
            visible={OffVisible}
            data={selectOff}
            onClose={() => {
              closeEditDialog();
            }}
          />
        ),
        [OffVisible]
      )}
      {useMemo(
        () => (
          <Online
            visible={OnVisible}
            data={selectOn}
            onClose={() => {
              closeEditDialog();
            }}
          />
        ),
        [OnVisible]
      )}
    </>
  );
};
export default PageList;
